<template>
  <div>
    <x-card v-if="hasPerm('mCheck:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="5"
              :sm="24"
            >
              <a-form-item label="日期">
                <a-date-picker
                  v-model="queryParam.QueryTime"
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="5"
              :sm="24"
            >
              <a-form-item label="班级">
                <a-select
                  allowClear
                  v-model="queryParam.ClassId"
                  placeholder="请选择班级"
                >
                  <a-select-option
                    v-for="item in classList"
                    :key="item.id"
                    :value="item.id"
                  >{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :md="5"
              :sm="24"
            >
              <a-form-item label="姓名">
                <a-input v-model="queryParam.ChildrenName" />
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <a-row>
        <span class="mr10">总人数： {{totalRows}}</span> |
        <span class="mr10 ml10">未检查人数： {{noCheckCount}}</span> |
        <span class="ml10">异常人数： {{abnormalCount}}</span>
      </a-row>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record,index) => index"
      >
        <span
          slot="bodyTemperature"
          slot-scope="text, record"
        >
          <span slot="bodyTemperature">
            <span
              v-if="record.id!=null"
              :style="{color:record.bodyTemperature>37.3? 'red' : ''}"
            >
              {{ record.bodyTemperature }}
            </span>
            <span v-else>-</span>
          </span>
        </span>
        <span
          slot="throatType"
          slot-scope="text, record"
        >
          <span slot="throatType">
            <span v-if="record.id!=null">
              <a-tag
                v-if="record.throatType===1"
                color="green"
              >正常</a-tag>
              <a-tag
                v-else-if="record.throatType===2"
                color="orange"
              >轻微</a-tag>
              <a-tag
                v-else-if="record.throatType===3"
                color="red"
              >严重</a-tag>
            </span>
            <span v-else>-</span>
          </span>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            type="danger"
            v-if="hasPerm('mCheck:edit')"
            @click="$refs.editForm.edit(record)"
          >修改</a>
        </span>
      </s-table>
    </a-card>
    <editForm
      ref="editForm"
      @ok="handleOk"
    />
  </div>
</template>
  
<script>
  import { sysPosList } from '@/api/modular/garden/classManage'
  import { mCheckList } from '@/api/modular/garden/mCheck'
  import { STable, XCard, XDown } from "@/components";
  import moment from 'moment';
  import editForm from './editForm.vue'
  export default {
    components: {
      XDown,
      XCard,
      STable,
      editForm
    },
    data() {
      return {
         // 查询参数
        queryParam: {
          ClassId: undefined,
          QueryTime:moment(moment(new Date()).format('YYYY-MM-DD'),'YYYY-MM-DD'),
          ChildrenName:undefined
        },
        // 表头
        columns: [
          {
            title: "日期",
            dataIndex: "recordTime",
          },
          {
            title: "班级",
            dataIndex: "className",
          },
          {
            title: "姓名",
            dataIndex: "childrenName",
          },
          {
            title: "体温",
            dataIndex: "bodyTemperature",
            scopedSlots: { customRender: 'bodyTemperature' },
          },
          {
            title: "咽喉",
            dataIndex: "throatType",
            scopedSlots: { customRender: 'throatType' },
          },
          {
            title: "操作",
            scopedSlots: { customRender: "action" },
            width: "100px",
          },
        ],
        classList: [],
        totalRows: 0,
        abnormalCount: 0,
        noCheckCount: 0,
        loadData: (parameter) => {
          let queryDate = this.queryParam.QueryTime
          queryDate = moment(queryDate).format('YYYY-MM-DD')
          return mCheckList(Object.assign(parameter, {
            ClassId:this.queryParam.ClassId,
            QueryTime:this.queryParam.QueryTime? queryDate : moment(new Date()).format('YYYY-MM-DD'),
            ChildrenName:this.queryParam.ChildrenName
          })).then((res) => {
            console.log(res)
           if(res.data.rows.length){
              let obj = {
                pageNo: res.data.pageNo,
                pageSize: res.data.pageSize,
                rows: res.data.rows[0].checkList,
                totalPage: res.data.totalPage,
                totalRows: res.data.totalRows,
              }
              this.totalRows = res.data.totalRows
              this.abnormalCount = res.data.rows[0].abnormalCount
              this.noCheckCount = res.data.rows[0].noCheckCount

              return obj
            }
          })
        },
      };
    },
    created(){
      this.getClass()
    },
    methods: {
      getClass() {
        let obj = {
          isArchived: false
        }
        sysPosList(obj).then(res => {
          this.classList = res.data
        })
      },
      handleOk() {
        this.$refs.table.refresh();
      }
    },
  };
  </script>
  
  <style>
  .mr10{
    margin-right: 10px;
  }
  .ml10{
    margin-left: 10px;
  }
  </style>
  